<template>
  <div class="password-editor" v-reveal="{ delay: 60 }">
    <div class="container">
      <el-page-header @back="goBack" title="返回管理后台">
        <template #content>
          <span class="page-title">密码修改</span>
        </template>
      </el-page-header>
      
      <div class="editor-content" v-reveal="{ delay: 120 }">
        <el-row :justify="'center'">
          <el-col :xs="24" :sm="20" :md="16" :lg="12">
            <el-card v-reveal="{ delay: 160, distance: 12 }">
              <template #header>
                <h2>修改管理员密码</h2>
              </template>
              
              <el-form :model="passwordForm" :rules="formRules" ref="formRef" label-width="120px">
                <el-form-item label="当前密码" prop="currentPassword">
                  <el-input
                    v-model="passwordForm.currentPassword"
                    type="password"
                    placeholder="请输入当前密码"
                    show-password
                  />
                </el-form-item>
                
                <el-form-item label="新密码" prop="newPassword">
                  <el-input
                    v-model="passwordForm.newPassword"
                    type="password"
                    placeholder="请输入新密码"
                    show-password
                  />
                  <div class="password-strength" v-if="passwordForm.newPassword">
                    <p>密码强度: {{ passwordStrength.label }}</p>
                    <el-progress 
                      :percentage="passwordStrength.percentage" 
                      :color="passwordStrength.color"
                      :stroke-width="8"
                    />
                  </div>
                </el-form-item>
                
                <el-form-item label="确认新密码" prop="confirmPassword">
                  <el-input
                    v-model="passwordForm.confirmPassword"
                    type="password"
                    placeholder="请再次输入新密码"
                    show-password
                  />
                </el-form-item>
                
                <el-form-item>
                  <el-button type="primary" @click="changePassword" :loading="changing" style="width: 100%;">
                    修改密码
                  </el-button>
                </el-form-item>
              </el-form>
              
              <div class="password-tips">
                <h3>密码要求</h3>
                <ul>
                  <li>密码长度至少8位</li>
                  <li>包含大小写字母</li>
                  <li>包含数字</li>
                  <li>包含特殊字符（可选）</li>
                </ul>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

export default {
  name: 'PasswordEditor',
  setup() {
    const router = useRouter()
    const formRef = ref()
    const changing = ref(false)
    
    const passwordForm = ref({
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    })
    
    const formRules = {
      currentPassword: [
        { required: true, message: '请输入当前密码', trigger: 'blur' }
      ],
      newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 8, message: '密码长度至少8位', trigger: 'blur' },
        { 
          validator: (rule, value, callback) => {
            if (value && !/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
              callback(new Error('密码必须包含大小写字母和数字'))
            } else {
              callback()
            }
          }, 
          trigger: 'blur' 
        }
      ],
      confirmPassword: [
        { required: true, message: '请确认新密码', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            if (value !== passwordForm.value.newPassword) {
              callback(new Error('两次输入的密码不一致'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }
      ]
    }
    
    const passwordStrength = computed(() => {
      const password = passwordForm.value.newPassword
      if (!password) return { label: '', percentage: 0, color: '#909399' }
      
      let score = 0
      let feedback = []
      
      // 长度检查
      if (password.length >= 8) score += 25
      if (password.length >= 12) score += 10
      
      // 字符类型检查
      if (/[a-z]/.test(password)) score += 20
      if (/[A-Z]/.test(password)) score += 20
      if (/\d/.test(password)) score += 20
      if (/[^a-zA-Z0-9]/.test(password)) score += 15
      
      // 复杂度检查
      if (/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password)) score += 10
      
      if (score < 40) {
        return { label: '弱', percentage: score, color: '#f56c6c' }
      } else if (score < 70) {
        return { label: '中等', percentage: score, color: '#e6a23c' }
      } else {
        return { label: '强', percentage: score, color: '#67c23a' }
      }
    })
    
    const goBack = () => {
      router.push('/admin')
    }
    
    const changePassword = async () => {
      if (!formRef.value) return
      
      try {
        await formRef.value.validate()
        changing.value = true
        
        // 模拟密码修改
        setTimeout(() => {
          if (passwordForm.value.currentPassword === 'admin123') {
            // 这里应该调用后端API修改密码
            localStorage.setItem('adminPassword', passwordForm.value.newPassword)
            ElMessage.success('密码修改成功')
            
            // 清空表单
            passwordForm.value = {
              currentPassword: '',
              newPassword: '',
              confirmPassword: ''
            }
            formRef.value.resetFields()
          } else {
            ElMessage.error('当前密码错误')
          }
          changing.value = false
        }, 1000)
      } catch (error) {
        console.error('密码修改失败:', error)
        changing.value = false
      }
    }
    
    return {
      formRef,
      changing,
      passwordForm,
      formRules,
      passwordStrength,
      goBack,
      changePassword
    }
  }
}
</script>

<style scoped>
.password-editor {
  padding: 20px 0;
}

.page-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #4CAF50;
}

.editor-content {
  margin-top: 20px;
}

.card-header h2 {
  color: #4CAF50;
  margin: 0;
  text-align: center;
}

.password-strength {
  margin-top: 10px;
}

.password-strength p {
  margin: 0 0 8px 0;
  color: #666;
  font-size: 0.9rem;
}

.password-tips {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.password-tips h3 {
  color: #4CAF50;
  margin-bottom: 15px;
}

.password-tips ul {
  list-style: none;
  padding: 0;
}

.password-tips li {
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  color: #666;
}

.password-tips li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #4CAF50;
  font-weight: bold;
}

@media (max-width: 768px) {
  .password-editor {
    padding: 10px 0;
  }
}
</style> 